import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Store 是专门提供数据源的地方
export default new Vuex.Store({
  // 在 state 中存储的都是全局共享的数据
  state: {
    count: 1,
    num: 2
  },
  // 在 Vuex 中，如果想对数据进行改变，进行修改，只能在 mutations 中进行修改
  mutations: {
    // 参数中接收的 state，实际上就是全局共享的数据对象
    addHandle(state) {
      state.count++
    },

    addHandleN(state, n) {
      state.count += n
    },

    addHandleFive (state, five) {
      state.count += 5
    },

    subHandle(state) {
      state.count--
    },

    subHandleN(state, n) {
      state.count -= n
    }
  },
  // actions 是专门用来处理异步操作的
  actions: {
    addAsync (context) {
      setTimeout(() => {
        // 不能够在 actions 中直接修改数据，
        // 还是调用 mutations 中的方法
        context.commit('addHandle')
      })
    },

    addNAsync (context, n) {
      setTimeout(() => {
        context.commit('addHandleN', n)
      })
    },

    subAsync (context) {
      setTimeout(() => {
        context.commit('subHandle')
      })
    },

    subNAsync (context, n) {
      setTimeout(() => {
        context.commit('subHandleN', n)
      })
    }
  },
  // getters 主要用来对 state 数据进行修饰、包裹，
  // 不会对 state 原数据进行修改，返回一个新的数据
  getters: {
    setNum (state) {
      return state.num === 2 ? '我等于2' : '我不等于2'
    }
  }
})
